<template>
    <div class="vue-table-container">
        <slot name="search">
            <div class="row form-horizontal">
                <div class="col-sm-12">
                    <div class="input-group">
                        <input placeholder="请输入关键词" class="input-sm form-control" name="keyword" type="text"
                               v-model="queryString" v-on:keyup.enter="search">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-sm btn-primary" @click="search">检索</button>
                        </span>
                    </div>
                </div>
            </div>
        </slot>
        <div class="table-container">
            <div class="feed-activity-list">
                <slot name="body" v-for="item in dataSource.items" :item="item"></slot>
            </div>
        </div>
        <div class="widget-toolbox padding-10 clearfix">
            <pagination :page-count="dataSource.pageCount"
                        :total="dataSource.total"
                        :current-page="dataSource.currentPage" @goPage="goPage"></pagination>
        </div>
    </div>
</template>
<style scoped>

</style>
<script>
    export default {
        props: {
            dataSource: {
                type: Object,
                default: []
            },
            wx_id: {
                type:[Number,String],
                default: ''
            }
        },

        data: function () {
            return {
                queryString: ''
            }
        },
        methods: {
            search: function () {
                let self = this;
                self.dataSource.fetch({w_id: this.wx_id,query: self.queryString});
            },
            goPage: function (event) {
                let self = this;
                self.dataSource.fetch({w_id: this.wx_id, page: event.page, query: self.queryString});
            }
        }
    }
</script>
